<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./script/jquery.js"></script>
    <style>
        button{
            width: 30px;
            height: 30px;
            background-color: green;
        }
    </style>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <input type="button" value ="input按钮">
    <script>
        $("button").click(function(){
            // 1.获取索引
            let index = $(this).index()
            console.log(index)

            // 2.text   获取和设置文本
            // 获取文本节点中的文本，而input是用.val()获取value
            let text = $(this).text()
            console.log(text)
            // 设置新文本，点击哪个按钮哪个按钮中的内容就变成"邓伦"
            $(this).text("邓伦")

            // 3.css("height") 获取css高度
            let height = $(this).css("height")
            console.log(height)
            // 设置css高度
            $(this).css("height","50px")
            设置多个样式
            $(this).css({
                height:"100px",
                width:"100px"
            })   
        })
        // 通过val()获取新的属性值
        $("input").click(function(){
                // console.log($(this).val())
                $(this).val("新的属性值")
            })
    </script>
</body>
</html>